<template>
    <div class="xf-content-top">
        <div class="xf-yiyan-box" @click.stop="copyText(yiyan)" ref="ainShow">
            <p>{{ yiyan }}</p>
        </div>
        <div class="xf-content-yiyan">
            <span class="xf-shadow-out" @click.stop="isShow = true" @mouseover="isShow = true">{{ yiyan }}</span>
            <span class="xf-shadow-out" @click.stop="refreshYiyan">
                <svg t="1713263613674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4487" width="24" height="24">
                    <path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="4488" fill="#cccccc"></path>
                </svg>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts" name="YiyanModule">
    import { ref, onMounted, watch } from 'vue'
    import { storeToRefs } from 'pinia'
    import swal from 'sweetalert'
    import { useYiyanModuleStore } from '@/store'
    const yiyanModuleStore = useYiyanModuleStore()

    let { yiyan, isShow } = storeToRefs(yiyanModuleStore)
    let ainShow = ref()
    
    const refreshYiyan = () => {
        yiyanModuleStore.getYiyan()
    }

    refreshYiyan()

    onMounted(() => {
        document.body.addEventListener('click', function (e) {
            e.stopPropagation()
            isShow.value = false
        })
    })

    const copyText = async  (text:string) => {
        await navigator.clipboard.writeText(text)
        swal('已复制到剪切版', '', 'success')
}
    
    const updateElementVisibility  = (element: HTMLElement , isVisible: boolean) => {
        if (!element || !element.style) {
            return
        }
        
        let eleStyle = element.style
        if (isVisible) {
            eleStyle.display = 'block'
            setTimeout(() => eleStyle.opacity = '1', 0)
        } else {
            eleStyle.opacity = '0'
            setTimeout(() => eleStyle.display = 'none', 350)
        }
}
    
    watch(isShow, newVal => updateElementVisibility(ainShow.value, newVal))
</script>

<style scoped lang="less">
    .xf-content-top {
        --h: 38.5px;
        height: var(--h);
        position: relative;
        z-index: 3;

        .xf-content-yiyan {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            span {
                line-height: var(--h);

                &:first-child {
                    font-size: 1.2em;
                    width: 300px;
                    font-family: "宋体", "SimSun";
                    font-weight: bold;
                    -webkit-text-align: left;
                    text-align: left;
                    -webkit-text-indent: 1em;
                    text-indent: 1em;
                    -webkit-text-overflow: ellipsis;
                    -webkit-overflow: hidden;
                    -webkit-white-space: nowrap;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                &:last-child {
                    width: var(--h);
                    height: var(--h);
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    &:active {
                        -webkit-box-shadow: var(--nitai5-shadow-int);
                        box-shadow: var(--nitai5-shadow-int)
                    }
                }
            }
        }

        .xf-yiyan-box {
            position: absolute;
            left: 0;
            bottom: calc(var(--h) + 1em);
            width: 85%;
            padding: .5rem;
            text-align: left;
            border-radius: 8px;
            -webkit-background-color: var(--nitai5-rgb-color-2);
            background-color: var(--nitai5-rgb-color-2);
            -webkit-backdrop-filter: var(--nitai5-backdrop-filter-1);
            backdrop-filter: var(--nitai5-backdrop-filter-1);
            opacity: 0;
            display: none;
            -webkit-transition: opacity .35s;
            -o-transition: opacity .35s;
            transition: opacity .35s;

            p {
                position: relative;
                font-size: 1rem;
                color: var(--nitai5-color-2);

                &::before {
                    content: '';
                    position: absolute;
                    bottom: -2.01rem;
                    left: .3rem;
                    width: 0;
                    height: 0;
                    border: .8rem solid transparent;
                    -webkit-border-top-color: var(--nitai5-rgb-color-2);
                    border-top-color: var(--nitai5-rgb-color-2);
                    z-index: 5;
                }
            }
        }
    }

    .xf-night .xf-content-top .xf-yiyan-box {
        -webkit-background-color: var(--nitai5-rgb-color-3);
        background-color: var(--nitai5-rgb-color-3);

        p {
            color: var(--nitai5-color-1);
            font-weight: bold;
        }
    }
</style>